﻿﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Play.aspx.cs" Inherits="AiXiu.WebSite.Play" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>视频播放</title>
    <link href="Content/mui/css/mui.min.css" rel="stylesheet" />
    <link href="Content/mui/css/app.css" rel="stylesheet" />
    <link href="Content/common.css" rel="stylesheet" />
    <link href="Content/mui/css/icons-extra.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.16/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.16/aliplayer-min.js"></script>
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.9.3/skins/default/aliplayer-min.css" />
    <script src="Content/mui/js/mui.js"></script>
    <style>
        .page-content {
            height: 460px;
        }

            .page-content p {
                font-size: 10px;
            }

        .mui-card-content-inner {
            width: 146px;
            z-index: 71;
            position: absolute;
            bottom: 20px;
            background-color: #000;
            opacity: 0.5;
            color: #fff;
            margin-left: 10px;
            padding: 8px;
        }

            .mui-card-content-inner p {
                color: #fff;
            }

        .avatar {
            width: 45px;
            height: 45px;
            border-radius: 25px;
        }
        #info {
            width: 60px;
            opacity:75%;
            margin-left: 280px;            
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">上传视频</h1>
        </header>
        <div class="mui-content" data-page="play">
            <div class="mui-card">
                <div class="mui-card-header mui-card-media" id="player-con"></div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p><%=Video.Headline%></p>
                        <p><span class="mui-icon mui-icon-location"></span><%=Video.Location%></p>
                    </div>
                    <div class="mui-card-content-inner" id="info">
                        <a href="Voide.aspx?id=<%=Author.Id%>" class="videos box-shadow-none bg-color-none external">
                            <img class="avatar" src="<%=Author.Avatar??"/imgs/avatar.jpg"%>" />
                        </a>
                        <p class="nickname text-color-white text-align-center no-margin-top"><%=Author.NickName%></p>
                        <a href="#" class="">
                            <i class="mui-icon-extra mui-icon-extra-heart-filled like-icon <%=IsLike?"text-color-red":"text-color-white"%>"></i>
                        </a>
                        <p class="like-count text-align-center no-margin-top"><%=LikeCount%></p>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="Content/mui/js/jquery.js"></script>
    <script src="//g.alicdn.com/de/prismplayer/2.9.3/aliplayer-min.js"></script>
    <script>         
        var player = new Aliplayer({
            id: "player-con",
            source: "<%=playInfo.PlayURL%>",
            width: "100%",
            height: "500px",
            cover: '<%=playInfo.CoverURL%>',
            autoplay: false,
            preload: false,
            isLive: false
        }, function (player) {
            console.log("The player is created");
        });

        // 点赞
        var videoId = '<%=Video.VideoId%>';
        var userId = '<%=Author.Id%>';
        var $likeIcon = $('.like-icon');
        var $likeCount = $('.like-count');
        $(".like-icon").click(function () {
            // 未点赞
            if ($likeIcon.hasClass('text-color-white')) {
                $.post("VideoLike.ashx", { videoId: videoId, userId: userId, action: 'add' }, function (data) {
                    data = $.parseJSON(data)
                    if (data.StatusCode == 0) {
                        $likeIcon.removeClass('text-color-white').addClass('text-color-red');
                        $likeCount.html(parseInt($('.other .like-count').html()) + 1);
                    } else {
                        alert(data.Message);
                    }
                })
            }
            // 已点赞
            else {
                $.post("VideoLike.ashx", { videoId: videoId, userId: userId, action: 'remove' }, function (data) {
                    data = $.parseJSON(data)
                    if (data.StatusCode == 0) {
                        $likeIcon.removeClass('text-color-red').addClass('text-color-white');
                        $likeCount.html(parseInt($('.other .like-count').html()) - 1);
                    } else {
                        alert(data.Message);
                    }
                })
            }
        })
    </script>
</body>
</html>
